<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col v-for="stock in dataList" :key="stock.id" :span="8">
        <commodity-item v-waves :data-info="stock" @click.native="handleClick(stock)"></commodity-item>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CommodityItem from './CommodityItem.vue'

export default {
  name: 'CommodityList',
  props: {dataList: {type: Array, default: []}},
  components: {
    CommodityItem
  },
  data () {
    return {}
  },
  methods: {
    handleClick (stock) {
      console.log('handleClick')
      // 判断该商品是否已下架，已下架则提示不允许售卖
      if (stock.stockStatus === 0) {
        this.$message.warning('该商品已下架，不允许销售！')
        return false
      }
      this.$store.dispatch('addToCartList', stock)
      this.$store.dispatch('showCartDialog')
      this.$bus.$emit('selectedCommodity')
    }
  }
}
</script>

<style scoped>
.container {
  margin: 10px;
  width: calc(100% - 20px);
  height: 100%;
  max-height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>